<!-- 商品详情 -->
<template>
  <view class="goods-detail-container">
    <!-- 轮播图 -->
    <view class="swiper-container">
      <swiper class="swiper" indicator-dots :autoplay="swiperConf.autoplay" :interval="swiperConf.interval">
        <swiper-item v-for="(banner, index) in swiperConf.banners" :key="index">
          <view class="swiper-item">
            <image :src="banner" mode="scaleToFill"></image>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <!-- 价格 -->
    <view class="price-box">
      <view class="title">
        华为手机
      </view>
      <view class="reference">
        <text>￥4200.00</text>
        <text>参考价</text>
      </view>
    </view>
  </view>
</template>

<script>
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  name: "GoodsDetail",
  setup() {
    // 轮播配置
    const swiperConf = reactive({
      autoplay: true,
      interval: 5000,
      banners: [
        "../../static/images/delete/g1.jpg"
      ]
    });
    
    return {
      swiperConf
    }
  }
});
</script>

<style scoped lang="scss">
$swiperHeight: 700rpx;

.swiper {
  height: $swiperHeight;
  
  .swiper-item {
    height: $swiperHeight;
    
    > image {
      width: 100%;
      height: 100%;
      border-radius: 4px;
    }
  }
}

.price-box {
  text-align: center;
  
  .title {
    font-weight: bold;
    margin-bottom: 80rpx;
  }
  
  .reference {
    text {
      &:first-child {
        font-weight: bold;
      }
      
      &:last-child {
        color: #666666;
        font-size: 28rpx;
        margin-left: 10rpx;
      }
    }
  }
}
</style>